﻿<template>
    <el-col :sm="24" :md="pzoption.mdwidth"   v-show="ishide">
        <i class="iconfont icon-shezhi pull-right widgetset hidden-print" @click.stop="dialogInputVisible = true"></i>
        <i class="iconfont icon-shanchu pull-right widgetdel hidden-print" @click.stop="delWid(pzoption.wigdetcode)"></i>
        <el-form-item :label="pzoption.title" :prop="'wigetitems.' + index + '.value'" :rules="childpro.rules">
            <el-input v-model="pzoption.value" style="display:none">
            </el-input>
            <ul v-show="!childpro.disabled">
                <li v-for="(item, index) in pzoption.dataset" :key="index" style=" float: left;margin-right: 20px;">
                    <el-checkbox v-model="item.checked" @change="checked=>ckchange(checked,item)" :disabled="childpro.disabled">
                        {{ item[childpro.label] }}
                    </el-checkbox>
                </li>
            </ul>
            <div class="disdiv" v-show="childpro.disabled" v-html="pzoption.value">

            </div>
            <!--<el-checkbox-group v-model="childpro.mvalue">
        <el-checkbox v-for="item in pzoption.dataset"  :label="item[childpro.label]" :value="item[childpro.val]"></el-checkbox>
    </el-checkbox-group>-->
        </el-form-item>
        <el-dialog title="组件属性" :visible.sync="dialogInputVisible" width="30%">

            <el-form :model="childpro">
                <el-form-item label="必填">
                    <el-switch v-model="childpro.rules.required"></el-switch>
                </el-form-item>
                <el-form-item label="是否多选">
                    <el-switch v-model="childpro.multiple" size="mini" style="width:100%">
                    </el-switch>
                </el-form-item>
                <el-form-item label="默认值">
                    <el-input v-model="childpro.defval" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="value对应字段">
                    <el-input v-model="childpro.val" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="label对应字段">
                    <el-input v-model="childpro.label" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="更改时执行代码">
                    <el-input v-model="childpro.jscode" :autosize="{ minRows: 6, maxRows: 9}" autocomplete="off" type="textarea"></el-input>
                </el-form-item>
            </el-form>
        </el-dialog>
    </el-col>

</template>
<script>
    module.exports = {
        props: ['pzoption', 'index'],
        data: function () {
            return {
                dialogInputVisible: false,
                childpro: {
                    placeholder: "请选择",
                    disabled: false,
                    hide: false,
                    itemtype: "text",
                    defval: "",
                    mvalue: [],
                    jscode: "",
                    multiple: true,
                    val: "val",
                    label: "label",
                    rules: {
                        required: false, message: '不能为空', type: "string"
                    }
                }
            }
        },
        computed: {
            ishide() {
                return !this.childpro.hide || window.location.href.indexOf('FormBuildV1') > -1
            }
        },
        methods: {
            delWid: function (wigdetcode) {
                // 子组件中触发父组件方法ee并传值cc12345
                this.$root.nowwidget = {};
                _.remove(this.$root.FormData.wigetitems, function (obj) {
                    return obj.wigdetcode == wigdetcode;
                });
            },
            ckchange: function (val, item) {
                var pro = this;
                var temval = [];
                var temvaltext = [];
                if (!pro.childpro.multiple) {
                    _.forEach(pro.pzoption.dataset, function (obj) {
                        if (obj[pro.pzoption.childpro.val] != item[pro.pzoption.childpro.val]) {
                            obj.checked = false;
                        }
                    })
                }
                for (var i = 0; i < pro.pzoption.dataset.length; i++) {
                    if (pro.pzoption.dataset[i].checked) {
                        temval.push(pro.pzoption.dataset[i][pro.pzoption.childpro.val]);
                        temvaltext.push(pro.pzoption.dataset[i][pro.pzoption.childpro.label]);
                    }
                }
                pro.pzoption.value = temval.join();
                pro.pzoption.valuetext = temvaltext.join();

                var data = val;
                let jscode = pro.childpro.jscode;
                let func = new Function('data', jscode);
                func(data)

            }
        },
        mounted: function () {
            var pro = this;
            pro.$nextTick(function () {
                if (pro.$root.addchildwig) {
                    pro.$root.addchildwig();//不能缺少,dom加载完成
                }
                if (pro.pzoption.childpro.itemtype) {
                    pro.childpro = pro.pzoption.childpro;
                    pro.$root.UpdateYBData(pro.pzoption, function (ybdata) {
                        if (app.isview) {//添加页面
                            pro.pzoption.value = app.jxparam(pro.childpro.defval);
                        }
                    });
                } else {
                    if (pro.pzoption.datatype == '2') {
                        pro.pzoption.staticdata = JSON.stringify([
                            { 'label': '一月', 'val': "1" },
                            { 'label': '二月', 'val': "2" },
                            { 'label': '三月', 'val': "3" },
                            { 'label': '四月', 'val': "4" }
                        ])
                        pro.$root.jxfiled(pro.pzoption)
                        pro.$root.addwd("label", pro.pzoption)
                        pro.$root.addwd("val", pro.pzoption)
                    }
                    pro.pzoption.childpro = pro.childpro;
                }



            })

        },
        watch: {
            'pzoption.value': { //深度监听，可监听到对象、数组的变化
                handler(newV, oldV) {
                    if (newV) {

                        var pro = this;
                        var temval = newV.split(',');
                        _.forEach(temval, function (val) {
                            _.forEach(pro.pzoption.dataset, function (obj) {
                                if (obj[pro.pzoption.childpro.val] == val) {
                                    obj.checked = true;
                                }
                            })
                        })
                    }
                },
                deep: true
            },
            'pzoption.dataset': { //深度监听，可监听到对象、数组的变化
                handler(newV, oldV) {
                    var pro = this;
                    if (newV.length != 0) {
                        var temval = pro.pzoption.value.split(',');
                        _.forEach(temval, function (val) {
                            _.forEach(pro.pzoption.dataset, function (obj) {
                                if (obj[pro.pzoption.childpro.val] == val) {
                                    obj.checked = true;
                                }
                            })
                        })
                    }
                    
                },
                deep: true
            }
        }
    };
</script>